import '../App.css'
import { getInterfaceData } from '../api/api'
import { useState, useEffect } from 'react'

// 轮播测试
const Silder = () => {
  let [sliderData, setSliderData] = useState([])
  let [slideDistance, setSlideDistance] = useState(0) // 向右滑动
  let [slidePage, setSlidePage] = useState(1) // 当前页数
  // 向右滑动
  const handleSlideRight = () => {
    setSlideDistance(slideDistance - 700)
    setSlidePage(slidePage + 1)
    if (slidePage === 3) {
      setSlideDistance((slideDistance = 0))
      setSlidePage((slidePage = 1))
    }
  }
  // 向左滑动
  const handleSlideLeft = () => {
    setSlideDistance(slideDistance + 700)
    setSlidePage(slidePage - 1)
    if (slidePage <= 0) {
      setSlidePage((slidePage = 0))

      setSlideDistance((slideDistance = 0))
    }
  }
  console.log(sliderData)
  useEffect(() => {
    getInterfaceData('/on-going').then(({ data }) => setSliderData(data))
  }, [])
  return (
    <>
      <div className="row">
        <div className="col-8">
          <div className="col-2 d-flex justify-content-end align-items-end">
            <span className="page-count f-size-12 mr-3">
              {slidePage}
              <i style={{ paddingLeft: 2, paddingRight: 2 }}>/</i>3
            </span>
            <div className="slider-btn d-flex ">
              <span className="btn-prev mr-1" onClick={() => handleSlideLeft()}></span>
              <span className="btn-next" onClick={() => handleSlideRight()}></span>
            </div>
          </div>
          <div className="hotplaylist-wrap overflow-hidden">
            <ul className="d-flex slider-area-ul" style={{ left: slideDistance + 'px' }}>
              {sliderData.map((item) => (
                <li className="mb-2 movie-frame mr-27" key={item.id}>
                  <a href="#">
                    <img src={item.img} alt="" className="movie-img" />
                  </a>
                  <div className="movie-info-waper text-center pl-2 pr-2 mt-2">
                    <div className="title f-size-14 text-overflow">{item.title}</div>
                    <div className="rating d-flex justify-content-center align-items-center pt-1 pb-2">
                      <span className="rating-stars"></span>
                      <span className="rating-count f-size-12 pl-1">6.2</span>
                    </div>
                    <div className="ticket-btn f-size-12">选票购票</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </>
  )
}

export default Silder
